<template>
  <div>
    <el-form :model="ruleForm"
             ref="formRef"
             :label-width="'100px'"
             class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <!-- <el-form-item label="小组选择" prop="groupId"
                        :rules="[ {  required: true, message: '请选择小组',  trigger: 'change'  } ]">
            <el-select filterable v-model="ruleForm.groupId" placeholder="请选择小组" style="width: 100%">
              <el-option v-for="item in groupOptions" :key="item.id" :label="item.groupName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
        </el-col>
        <el-col :span="6">
          <el-form-item label="驾照:" prop="certificateDriveType"
            :rules="[ { required: true, message: '请选择驾照类型',  trigger: 'change' } ]">
            <el-select v-model="ruleForm.certificateDriveType" placeholder="请选择驾照" style="width: 100%">
              <el-option label="A1" value="A1"></el-option>
              <el-option label="A2" value="A2"></el-option>
              <el-option label="B1" value="B1"></el-option>
              <el-option label="B2" value="B2"></el-option>
              <el-option label="C1" value="C1"></el-option>
              <el-option label="C2" value="C2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="领证时间:" prop="takeDriveTime"
                        :rules="[ {  required: true, message: '请选择领证时间',  trigger: 'change'  } ]">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.takeDriveTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="增驾时间:" prop="takeDriveAddTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.takeDriveAddTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换证时间:" prop="takeDriveExpireTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.takeDriveExpireTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体检时间:" prop="driverCheckTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.driverCheckTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格证类型:" prop="certificateType"
                        :rules="[ {  required: true, message: '请选择资格证类型',  trigger: 'change'  } ]">
            <el-select v-model="ruleForm.certificateType" placeholder="请选择资格证类型" style="width: 100%">
              <el-option label="道路客运" value="道路客运"></el-option>
              <el-option label="网约车" value="网约车"></el-option>
              <el-option label="出租车" value="出租车"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="准驾车型:" prop="driveType"
                        :rules="[ {  required: true, message: '请选择准驾车型',  trigger: 'change'  } ]">
            <el-select
                v-model="ruleForm.driveType"
                placeholder="请选择准驾车型"
                style="width: 100%">
              <el-option label="A1" value="A1"></el-option>
              <el-option label="A2" value="A2"></el-option>
              <el-option label="B1" value="B1"></el-option>
              <el-option label="B2" value="B2"></el-option>
              <el-option label="C1" value="C1"></el-option>
              <el-option label="C2" value="C2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证件号码:" prop="serviceType">
            <el-input v-model="ruleForm.certificateNum" placeholder="请输入证件号码"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="领证时间:" prop="takeCertificateTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.takeCertificateTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="换证时间:" prop="certificateExpireTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.certificateExpireTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="社保公司:" prop="socialUnitChild">
            <el-select @change="handleChild" clearable filterable v-model="ruleForm.socialUnitChild" placeholder="公司" style="width: 50%">
              <el-option v-for="item in socialUnitChildOptions" :key="item.id" :label="item.companyName"
                         :value="item.id"></el-option>
            </el-select>
            <el-select @change="handleCustomer"  clearable filterable v-model="ruleForm.socialUnitCustomer" placeholder="挂靠公司" style="width: 50%">
              <el-option v-for="item in socialUnitCustomerOptions" :key="item.id" :label="item.unitName"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买时间:" prop="buySocialTime">
            <el-date-picker
                style="width: 100%"
                class="date"
                v-model="ruleForm.buySocialTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                :clearable="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家庭住址:" prop="serviceType">
            <el-input @focus="showMap" style="width: 100%" v-model="ruleForm.homeAddress" placeholder="请选择家庭住址"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注:" prop="serviceType">
            <el-input 
              maxlength="200" 
              type="textarea" 
              show-word-limit 
              style="width: 100%" 
              v-model="ruleForm.otherNote"
              placeholder="其他备注" 
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
              label="驾驶证:"
              prop="driverCardUrl1"
              :rules="[ {  required: false, message: '请上传驾驶证(正面)',  trigger: 'change'  } ]">
            <UploadImg
                style="display: inline-block"
                imgName="driverCardUrl1"
                @getImgUrl="setImgUrl"
                url="/company/upload"
                :ps="{ userName: uname }"
                :tiptext="'（正）'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="驾驶证:"
            prop="driverCardUrl2"
            :rules="[ {  required: false, message: '请上传驾驶证(反面)',  trigger: 'change'  } ]">
            <UploadImg
              imgName="driverCardUrl2"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（反）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="资格证:"
            prop="certificateUrl">
            <UploadImg
              imgName="certificateUrl1"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（正）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="资格证:"
            prop="certificateUrl2">
            <UploadImg
              imgName="certificateUrl2"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（反）'"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="体检报告:"
            prop="driverCheckUrl">
            <UploadImg
              imgName="driverCheckUrl"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="6">
          <el-form-item
            label="证明:"
            prop="safeProveUrl">
            <UploadImg
              imgName="safeProveUrl"
              @getImgUrl="setImgUrl"
              url="/company/upload"
              :ps="{ userName: uname }"
              :tiptext="'（无重大事故凭证）'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tp-amap
      style="height: 400px;z-index: 99"
      v-if="isShowMap"
      :state="isShowMap"
      @getMdState="getAmapState"
      @getMapData="getMapData"
    />
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getRoleByDeptId, getCompanyDict, getGroupDict} from "@/api/services/common.service";
import {getCompanyCusIsDependData} from "@/api/services/logistics.service";
import TpAmap from "@/views/tpls/tp-amap";
import UploadImg from '@/components/UploadImg';

export default {
  name: "DriverFrom",
  components: {TpAmap, UploadImg},
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      isShowMap: false,
      ruleForm: {
        // groupId: '', //小组选择
        certificateDriveType: 'A1', // 驾照
        takeDriveTime: '', // 驾驶证领证时间
        takeDriveAddTime: '', //  增驾时间
        takeDriveExpireTime: '', //  换证时间
        certificateType: '道路客运', //  资格证证件类型
        driveType: 'A1', //  准假车型
        certificateNum: '', // 证件号码
        takeCertificateTime: '', //  领证时间
        certificateExpireTime: '', //  资格证换证时间
        socialUnitChild: '', // 社保单位子公司
        socialUnitCustomer: '', // 社保单位挂靠客户
        buySocialTime: '',  // 购买时间
        homeAddress: '', // 家庭住址
        otherNote: '', //备注
        driverCardUrl: '', // 驾驶证
        driverCardUrl1: '',
        driverCardUrl2: '',
        certificateUrl: '', // 资格证
        certificateUrl1: '',
        certificateUrl2: '',
        driverCheckUrl: '', // 体检报告
        safeProveUrl: '', // 无重大事故
      },
      departmentOptions: [],
      groupOptions: [],
      socialUnitChildOptions: [],
      socialUnitCustomerOptions: []
    }
  },
  created() {
    const that = this;

    // 驾驶证领证日期（默认上一年）
    that.ruleForm.takeDriveTime = that.$moment().add(-1, 'y').format('YYYY-MM-DD');
    console.log('驾驶证领证日期',that.ruleForm.takeDriveTime);

    // 小组选择
    getGroupDict({teamId: ''}).then(res => {
      this.groupOptions = res.data
    })
    getCompanyDict().then(res => {
      this.socialUnitChildOptions = res.data
    })
    getCompanyCusIsDependData({unitNum: this.lunitNum}).then(res => {
      this.socialUnitCustomerOptions = res.data
    })
  },
  methods: {
    getSource() {
      this.ruleForm.driverCardUrl = [this.ruleForm.driverCardUrl1, this.ruleForm.driverCardUrl2].join(',')
      this.ruleForm.certificateUrl = [this.ruleForm.certificateUrl1, this.ruleForm.certificateUrl2].join(',')
      return this.ruleForm
    },
    handleChange(id) {
      this.ruleForm.roleId = ''
      getRoleByDeptId({deptId: id}).then(res => {
        this.roleOptions = res.data
      })
    },
    // 验证
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate((valid) => {
          resolve(valid)
        })
      })
    },
    resetFields() {
      this.$refs.formRef.resetFields();
    },
    handleChild() {
      this.ruleForm.socialUnitCustomer = ''
    },
    handleCustomer() {
      this.ruleForm.socialUnitChild = ''
    },
    showMap() {
      this.isShowMap = true;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const {address, lng, lat} = e;
      this.ruleForm.homeAddress = address
      this.ruleForm.homeLatLon = `${lng},${lat}`;
      this.isShowMap = false;
    },
    setImgUrl(data) {
      if (data.name === 'driverCardUrl1') {
        this.ruleForm.driverCardUrl1 = data.url;
      }
      if (data.name === 'driverCardUrl2') {
        this.ruleForm.driverCardUrl2 = data.url;
      }
      if (data.name === 'certificateUrl1') {
        this.ruleForm.certificateUrl1 = data.url;
      }
      if (data.name === 'certificateUrl2') {
        this.ruleForm.certificateUrl2 = data.url;
      }
      if (data.name === 'driverCheckUrl') {
        this.ruleForm.driverCheckUrl = data.url;
      }
      if (data.name === 'safeProveUrl') {
        this.ruleForm.safeProveUrl = data.url;
      }
    }
  }
}
</script>

<style scoped>

</style>